import React from "react";


import {Modal, Form, message, Button, Input, Table, Radio} from 'antd';
import {
    projectMicroServiceListApi,
    addMicroServiceApi,
    modifyMicroServiceApi,
    removeMicroServiceApi,
} from "../api/projectConfig";

const confirm = Modal.confirm
const FormItem = Form.Item;
const { TextArea } = Input;

class MicroService extends React.Component {

    completeCallBack;
    updateEntityId;

    state = {
        visible: false,
        data: []
    }

    componentDidMount() {
        this.props.onRef(this)
        this.fetchMicroServiceList();
    }

    showModal = (callBack) => {
        this.completeCallBack = callBack;
        this.setState({...this.state, visible: true});
    }

    handleCancel = () => {
        this.setState({...this.state, visible: false});
    }

    fetchMicroServiceList = () => {
        projectMicroServiceListApi(this.props.projectId).then((res)=>{
            this.setState({...this.state, data: res.data.data});
        });
    }

    removeMicroService = (id)=>{

        let that = this;
        confirm({
            title: '是否确定删除模块?',
            content: 'Some descriptions',
            okText: 'Yes',
            okType: 'danger',
            cancelText: 'No',
            onOk() {
                removeMicroServiceApi(id).then((res)=>{
                    message.success('删除成功！');
                    that.fetchMicroServiceList();
                    if(that.completeCallBack) {
                        that.completeCallBack('delete');
                    }
                });
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }


    // 添加服务
    addMicroService = (e)=>{
        e.preventDefault();
        const { form:{ setFieldsValue}, projectDetail} = this.props;

        let that = this;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {

                let formData = that.props.form.getFieldsValue();
                formData.projectId = that.props.projectId;

                var ret = null;
                if(that.state.updateModuleId) {
                    formData.id = that.state.updateModuleId;
                    ret = modifyMicroServiceApi(formData);
                } else {
                    ret = addMicroServiceApi(formData);
                }

                ret.then((res)=>{
                    message.success('保存成功！');
                    that.fetchMicroServiceList();

                    that.state.updateEntityId = false;
                    /** 清除输入框 */
                    that.props.form.resetFields();

                    setFieldsValue({groupId:projectDetail.groupId, artifactId:projectDetail.artifactId+'-'});

                    if(that.completeCallBack) {
                        that.completeCallBack('add-update');
                    }
                });
            }
        });
    }


    render() {

        let {visible, data} = this.state
        const { form:{ getFieldDecorator, setFieldsValue} } = this.props;

        let columns = [{
            title: '服务',
            dataIndex: 'microName',
            width: '40%',
            key: 'microName',
            render: (_, record) => {
                return <div>
                    groupId: {record.groupId} <br />
                    artifactId: {record.artifactId} <br />
                    version: {record.version} <br />
                </div>
            }
        }, {
            title: '服务介绍',
            dataIndex: 'description',
            width: '20%',
            key: 'description',
            render: (_, record) => {
                return <div>
                    name: {record.name} <br />
                    description: {record.description} <br />
                </div>
            }
        }, {
            title: '访问路径',
            dataIndex: 'contextPath',
            width: '20%',
            key: 'contextPath'
        }, {
            title: 'Operate',
            width: '20%',
            render: (text, row, index) => {
                return (<div>
                    <Button onClick={() => {
                        this.removeMicroService(row.id);
                    }} type="danger" size="small">删除</Button>
                    &nbsp;
                    <Button onClick={() => {
                        console.log(row);
                        this.setState({...this.state, updateModuleId: row.id});
                        setFieldsValue(row);
                    }} type="danger" size="small">修改</Button>
                </div>)
            }
        }];

        const {projectDetail} = this.props;

        // 项目类型为【单项目】时，删除【微服务】项
        if (projectDetail.proType === 'simple') {
            columns = columns.splice(1, columns.length);
        }



        return (
            <Modal
                width={900}
                visible={visible}
                keyboard={false}
                maskClosable={false}
                title="服务管理"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={[
                    <Button key="back" onClick={this.handleCancel}>关闭</Button>
                ]}
            >

                {/* 添加/修改 确定-保存 */}
                <Form layout="inline" className="form_item_4" onSubmit={this.addMicroService}>

                    <FormItem>
                        {getFieldDecorator('name', {
                            rules: [{required: true, message: 'is not null!'}],
                        })(
                            <Input placeholder="服务名"/>
                        )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('groupId', {
                            initialValue: projectDetail.groupId,
                            rules: [{required: true, message: 'is not null!'}],
                        })(
                            <Input placeholder="例：com.test"/>
                        )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('artifactId', {
                            initialValue: projectDetail.artifactId+"-",
                            rules: [{required: true, message: 'is not null!'}],
                        })(
                            <Input placeholder="例：-order"/>
                        )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('contextPath', {
                            initialValue: '/',
                            rules: [{required: true, message: 'is not null!'}],
                        })(
                            <Input placeholder="访问路径"/>
                        )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('version', {
                            initialValue: '1.0',
                            rules: [{required: true, message: 'is not null!'}],
                        })(
                            <Input placeholder="版本号"/>
                        )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('description', {
                            rules: [{required: true, message: 'is not null!'}],
                        })(
                            <TextArea placeholder="简介"/>
                        )}
                    </FormItem>

                    <FormItem>
                        {getFieldDecorator('apiProject', {
                            initialValue: 1,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Radio.Group>
                                <Radio value={1}>Api</Radio>
                                <Radio value={0}>微服务</Radio>
                            </Radio.Group>
                        )}
                    </FormItem>

                    <Button type="primary" htmlType="submit" icon="save">{this.updateEntityId ? '修改' : '添加'}</Button>
                </Form>


                {/* 列表 删除 */}

                {/* 修改 -  */}
                <Table columns={columns} rowKey={record => record.id} dataSource={data} pagination={false}/>


            </Modal>
        );
    }

}

const _MicroService = Form.create()(MicroService);
export default _MicroService